<script setup>
// export default{
//   data(){
//     return{
//       msg:"hello"
//     }
//   }
// }
// let msg="hello";
import { ref, reactive, computed,watch,onMounted,provide } from "vue"
import ebutton from './button.vue'
let num = ref(10);
let str = ref("hello");
let obj = ref({
  name: "zhangsan",
  grades: [{ subject: "英语", score: 100 }],
});
let goods = reactive({ name: "手机", price: 1999 });
const change = () => {
  num.value++;
  // str.value="world";
  // obj.value.name="lisi";
  // obj.value.grades[0].score=90;
  goods.price = 1000;
  goods = { name: "电脑", price: 19999 };
};
//计算属性
const num2=computed(()=>{
  return num.value*10;
})
//监听器
watch(num,()=>{
  console.log(num.value);
})
//生命周期函数
onMounted(()=>{
  console.log("渲染结束1")
})
onMounted(()=>{
  console.log("渲染结束2")
  console.log(divEle.value);
})
//模版引用（获取元素）
let divEle=ref(null);
//依赖注入
let x=ref(1);
provide('key',x);
//获取组件
let btnComp=ref(null);
onMounted(()=>{
  // console.log(btnComp.value);
  // btnComp.value.add();
})
const value1 = ref(0)
const value = ref(new Date())
</script>

<template>
  <!-- <div ref="divEle">{{ num }}</div>
  <div>{{ num2 }}</div>
  <div>{{ str }}</div>
  <div>{{ obj.name }}</div>
  <div>{{ obj.grades[0].score }}</div>
  <div>{{ goods.name }}</div>
  <button @click="change">change</button> -->
  <!-- <e-button></e-button> -->
  <!-- <ebutton type="primary"></ebutton>
  <ebutton @add="num++" ref="btnComp"></ebutton>
  <button @click="x++">修改x</button>
  <el-slider v-model="value1" />
  <el-calendar v-model="value" /> -->
  <!-- <router-view></router-view> -->
   <router-view/>
</template>

<style>
</style>
